<template>
	<view class="contain"  >

		<view class="flex-col section_6">
		  <view class="flex-row items-center section_7 space-x-4">
		    <text class="font_3">活动热销</text>
		    <text class="font_4 text_7">更多好商品推荐</text>
		  </view>




		<swiper :indicator-dots="true" :autoplay="false" :interval="4000" :duration="500" style="height: 780rpx;">
		                    <swiper-item v-for="(k1,v1) in list" :key="k1.key">
		                        <uni-grid :column="3" class="goodbox">
		                            <uni-grid-item style="height: 360upx;" v-for="item in k1" :key="item.id" >
		                                <view class="grid-item-box item" @tap.stop="go('/pages/goods/detail?id='+item.id)">

											<image class="good_img"  :src="item['mainImg']" mode="aspectFill"/>
											<text class="self-center good_title">{{item.title}}</text>
											<view class=" good_c">
											  <text class="text_price">价格：</text>
											  <text class="text_price_u">￥</text>
												<text class="font_1 text_10">{{item.price | price}}</text>
											</view>


		                                </view>



		                            </uni-grid-item>
		                        </uni-grid>
		                    </swiper-item>
		                </swiper>
		</view>
	</view>
</template>
<style scoped>
	/deep/ uni-swiper .uni-swiper-wrapper{
		overflow: auto;
	}
/deep/	.uni-swiper-dots, .uni-swiper-dots-horizontal{
		margin-bottom: 0rpx;
		z-inde:9999;
	}
/* .grid-item-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;

        image {
            width: 50upx;
            height: 50upx;
        }
    } */

/* hot */
.section_6 {
  padding-bottom: 30rpx;
  background-color: #ffffff;
  border-radius: 20rpx;
  filter: drop-shadow(0px 0px 8rpx #ffbd5208);
  overflow: hidden;
  border: solid 1.2rpx #e8a2a26e;
}
.section_7 {
  padding: 28rpx 24rpx 40rpx;
  background-image: linear-gradient(180deg, #f2aab12b -36.1%, #ffffff75 92.3%);
}
.space-x-4 > view:not(:first-child),
.space-x-4 > text:not(:first-child),
.space-x-4 > image:not(:first-child) {
  margin-left: 8rpx;
}
.font_3 {
  font-size: 32rpx;
  font-family: HarmonyOSSansSC;
  line-height: 30rpx;
  color: #081329;
}
.font_4 {
  font-size: 24rpx;
  font-family: HarmonyOSSansSC;
  line-height: 24rpx;
}
.text_7 {
  color: #081329;
  line-height: 23rpx;
  opacity: 0.46;
}

</style>

<style scoped>

.goodbox{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}
.goodbox .item{
	/* 方法一 */
	flex: 1;
	/* height: 50px; */
	padding: 10rpx;
	/* background-color: #999; */
	/* width: calc((100% - 10px) / 3);// 这里的10px = (分布个数3-1)*间隙5px, 可以根据实际的分布个数和间隙区调整 */
/* 	min-width: calc((100% - 10px) / 3);// 加入min-width、max-width后每个child的宽度就生效了
	max-width: calc((100% - 10px) / 3); */

	/* 方法二 */
	/*
		height: 50px;
		margin: 0 5px 5px 0;
		box-sizing: border-box;
		background-color: #999;
		flex: 0 0 calc((100% - 10px) / 3);
	*/
}
.goodbox .item:nth-child(3n+2){
	padding: 10rpx;
	/* margin-right: 0;// 去除第3n个的margin-right */
}

.goodbox .good_img {
  overflow: hidden;
  width: 220rpx;
  height: 214rpx;
}
.good_title{
  font-size: 24rpx;
  font-family: HarmonyOSSansSC;
  line-height: 1.5;
  color: #081329;
  height:70rpx;
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;//文本溢出显示省略号
}

.good_c {
  /* padding: 0 20rpx; */
}
.text_price {
  font-size: 24rpx;
  font-family: HarmonyOSSansSC;
  line-height: 15rpx;
  color: #666e7a;
}
.text_price_u {
  font-size: 16rpx;
  font-family: HarmonyOSSansSC;
  line-height: 12rpx;
  color: #ff5733;
}
.group_6 {
  line-height: 24rpx;
  height: 24rpx;
}
.font_6 {
  font-size: 32rpx;
  font-family: HarmonyOSSansSC;
  line-height: 24rpx;
  color: #ff5733;
}
.text_10 {
  word-break: break-all;
}

</style>
<script>
	const $ = require('@/utils/api.js');
	const API = require('@/utils/api/shops.js').default;
	let self;
	export default {
		props:{
			// cates: {
			// 	required: true,
			// 	type: Array
			// }
		},
		data() {
			return {
				list: []
			};
		},
		onLoad: function() {
			self = this;
		},
		created() {
			self = this;
			self.getList();
		},
		methods: {

			splitArr(dataArr,colomns){
				// var dataArr = ['a','b','c','d','e','f','g'];

				var result = [];

				// var colomns = n;

				// js 把一个数组分割成 n 个一组
				for( var i = 0, len = dataArr.length; i < len; i += colomns ) {
				  result.push( dataArr.slice( i, i + colomns ) );
				}
				return result;
			},
			getList() {
				// console.log(API.searchGoodsApi)
				$.ajax({
					url: API.searchGoodsApi,
					data: {
						shopId: '',
						// catePid: self.cates[index]['id'],
						sort:'sell_num desc',
						page: 1,
						pageSize: 24,
					},
					method: 'GET',
					success(res) {
						let list = res.data.list ? res.data.list : [];
						// console.log("list",list)
						self.list =self.splitArr(list,6)
						// console.log("self.list",self.list)


					}
				})
			},
			init() {},
		},
		computed: {
			i18n() {
				return this.$t('index')
			},
		},
		mounted() {},
		destroyed() {},
		components: {},
		onPullDownRefresh() {
		},
		onReachBottom() {
		}
	}
</script>
